<!-- 学社 - 动态 - 我的问答 -->
<template>
  <view class="bg-#F6F6F6 min-h-screen">
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <template #top>
        <z-navbar title="我的问答" :border-bottom="true" />
        <!-- tab栏 -->
        <view class="flex mx-14 mt-5 mb-1 h-48 bg-white rounded-md">
          <view v-for="(item, index) in tabList" :key="index" :class="[state.tabCurrent == index ? 'tab-active' : '']"
            class="flex-1 leading-6 text-center c-#999 text-28" @click="onTabChage(index)">
            {{ item.label }}
          </view>
        </view>
      </template>
      <!-- 列表 -->
      <view class="px-4">
        <view v-for="(item, index) in state.list" :key="index" class="card-shadow px-4 py-3 bg-white rounded-md mt-3">
          <view class="absolute right-30 mt--3">
            <u-badge v-if="item?.un_read" :is-dot="true" type="error" size="mini"></u-badge>
          </view>
          <!-- 顶部 -->
          <view class="flex items-center h-80">
            <u-image class="flex-shrink-0" shape="circle" width="80" height="80" :src="item.user?.avatar" @click="toHomePage(item.user?.id)"></u-image>
            <view class="flex-1 flex flex-col justify-between ml-3 h-76">
              <view class="flex items-center">
                <view class="c-#333 text-32 flex-1 text-single" @click="toHomePage(item.user?.id)">{{ item.user?.nickname }}</view>
                <view v-if="item.user?.member_position > 0" class="flex-shrink-0 tag-identity mx-2">{{formatIdentity(item.user?.member_position) }}</view>
                <image v-if="item.user?.vip_level > 0" mode="aspectFit"
                  :class="['flex-shrink-0', item.user?.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
                  :src="`/static/images/user/ic_vip_tag_${formatVipIcon(item.user?.vip_level)}.png`" />
              </view>
              <view class="c-#999 text-24">{{ item.createtime }}</view>
            </view>
          </view>
          <!-- 主体 -->
          <view class="mt-2 text-sm c-#666" @click="onDetail(item)">
            向
            <!-- type:1=我向别人提问,2=别人向我提问 -->
            <text v-if="item.type == 1" class="c-#F4AF22 mx-1" @click="toHomePage(item.answerer?.id)">@{{ item.answerer?.nickname }}</text>
            <text v-else class="mx-1">您</text>
            提问：{{ item.question?.content }} 
          </view>
          <!-- 提问 -->
          <view v-if="item.type == 1" class="mt-2 mb-3">
            <u-line color="#F5F5F5" />
          </view>
          <view class="flex justify-between items-center h-50">
            <view class="c-#999 text-28">{{ item?.club_name }}</view>
            <view v-if="item.type == 1 && item.status == 0" class="c-#FF513A text-28">待回答</view>
            <view v-if="item.type == 1 && item.status == 1" class="flex items-center">
              <view class="mr-1 c-#F4AF22 text-28" @click="onViewAnswer(item)">查看回答</view>
              <image class="w-14 h-24" src="/static/images/home/ic_more_yellow.png"></image>
            </view>
          </view>
          <!-- 回答 -->
          <template v-if="item.type == 2">
            <view class="mt-2 mb-3">
              <u-line color="#F5F5F5" />
            </view>
            <view class="text-center">
              <view v-if="item.type == 2 && item.status == 0" class="c-#F4AF22 text-28" @click="onAnswer(item)">回答</view>
              <view v-if="item.type == 2 && item.status == 1" class="c-#F4AF22 text-28 opacity-20"
                @click="navigate(`/package_society/pages/trend/answer/detail?id=${item.answer_id}`)">已回答</view>
            </view>
          </template>
        </view>
      </view>
      <template #bottom>
        <view v-if="state.tabCurrent == 1" class="h-150 bg-white">
          <u-line color="#eee" />
          <view class="btn-submit" @click="navigate(`/package_society/pages/trend/question/add?club_id=${state.club_id}`)">去提问</view>
        </view>
      </template>
    </z-paging-list>
  </view>
</template>
<script setup>
import { navigate,showToast } from "@/common/util/uni";
import { formatIdentity, formatVipIcon, toHomePage } from '@/common/util/util'
import { getMyQuestion, postReadMessage } from '@/common/http/module/society.js'

const list = ref();
const state = reactive({
  club_id: '', // 学社id
  member_position: '', // 学社身份
  isSelf: true, // 是否为当前用户
  tabCurrent: 0, // tab当前激活项
  list: []
})

// tab栏
const tabList = [
  {
    label: '所有',
    value: 0
  },
  {
    label: '提问',
    value: 1
  },
  {
    label: '回答',
    value: 2
  }
]

function refresh() {
  list.value.onRefresh()
}

function loadData(page) {
  getMyQuestion(state.club_id, page, state.tabCurrent).then(res => {
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

// tab切换
function onTabChage(i) {
  state.tabCurrent = i
  refresh()
}

// 通用进入详情
function onDetail(item) {
  postReadMessage(item.id).then(() => {
    refresh()
    if(item.question){
      navigate(`/package_society/pages/trend/question/detail?id=${item.question_id}`)
    }else{
      showToast('该回答已删除','error')
    }
   
  })

}

// 查看回答
function onViewAnswer(item) {
  postReadMessage(item.id).then(() => {
    refresh()
    if(item.answer_id!=0){
      navigate(`/package_society/pages/trend/answer/detail?id=${item.answer_id}`)
    }else{
      showToast('该回答已删除','error')
    }
    // navigate(`/package_society/pages/trend/question/detail?id=${item.question_id}`)
  })
}

// 回答
function onAnswer(item) {
  navigate(`/package_society/pages/trend/answer/add?question_id=${item.question_id}&club_id=${item.club_id}`)
}

onLoad(options => {
  console.log('options', options);
  state.club_id = options.club_id
  state.member_position = options.member_position
  loadData;
});
defineExpose({
  refresh
})
</script>

<style lang="scss" scoped>
.tab-active {
  background: linear-gradient(-76.14deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  border: 1px solid #FFFFFF;
  border-radius: 12rpx;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.3);
  color: #fff;
  font-weight: bold;
}

.card-shadow {
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}
</style>
